<template>
  <div class="duty">
      <!-- 面包屑 -->
      	<el-breadcrumb separator=">" class="crumbs">
      	  	<el-breadcrumb-item :to="{ path: '/duty'}">职位管理</el-breadcrumb-item>
      	</el-breadcrumb>
			<!-- 查询条件 -->
		  <el-row :gutter="20">
				<el-col :sm="16" :xs="24">
				<el-col :span="8" class="roleInquire roleInquireBox">职位编码</el-col><el-col class="roleInquireBox" :span="16"><el-input v-model="positionCode" placeholder="请输入内容"></el-input></el-col>
				<el-col :span="8" class="roleInquire roleInquireBox">职位名称</el-col><el-col class="roleInquireBox" :span="16"><el-input v-model="positionName" placeholder="请输入内容"></el-input></el-col>
				<el-col :span="8" class="roleInquire roleInquireBox">是否有效</el-col><el-col class="roleInquireBox" :span="16"><el-select v-model="isEffect" placeholder="请选择" class="stateBox">
					<el-option key="" label="全部" value=""></el-option>
						<el-option
							v-for="item in states"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
						</el-select></el-col>
			</el-col>
			<el-col :sm="8" :xs="24" class="inquireBtnBox">
				<el-button class="inquireBtn" @click="inquire">查询</el-button>
			</el-col>
		</el-row>
		<!-- 添加用户按钮 -->
		<el-button class="addRole" @click="operation('add')"  v-if="s.indexOf('rbac:title:add') != -1">添加职位</el-button>
		<!-- 列表展示 -->
		<el-table :data="tableData" border style="width: 100%" stripe>
			<el-table-column prop="positionCode" label="职位编码" > </el-table-column>
			<el-table-column prop="positionName" label="职位名称" > </el-table-column>
			<el-table-column prop="positionDescription" label="职位描述" > </el-table-column>
			<!-- <el-table-column prop="mobile" label="职位角色" > </el-table-column> -->
			<el-table-column prop="isEffect" label="是否有效" > </el-table-column>

			<el-table-column fixed="right" label="操作" width="200">
				<template scope="scope">
					<el-button type="text" size="small" @click="operation('add',scope.row)" v-show="s.indexOf('rbac:title:edit') != -1">添加</el-button>
					<el-button type="text" size="small" @click="operation('amend',scope.$index)" v-show="s.indexOf('rbac:title:edit') != -1">修改</el-button>
					<el-button type="text" size="small" @click="operation('delOrORcover',scope.$index,0)" v-show="s.indexOf('rbac:title:delete') != -1" v-if="tableData[scope.$index].isEffect == '是'">冻结</el-button>
					<el-button type="text" size="small" @click="operation('delOrORcover',scope.$index,1)" v-show="s.indexOf('rbac:title:delete') != -1" v-if="tableData[scope.$index].isEffect == '否'">恢复</el-button>
					<el-button type="text" size="small" @click="operation('allotRoles',scope.$index)" v-show="s.indexOf('rbac:role:assign') != -1">分配角色</el-button>
				</template>
			</el-table-column>
	</el-table>
	<!-- 分页器 -->
	<el-pagination
		class="sorter"
		@current-change="handleCurrentChange"
		:current-page.sync="currentPage"
		:page-size="10"
		layout="prev,pager,next,jumper"
		:total="totalCount">
	</el-pagination>
  </div>
</template>
<script>
export default {
	name: 'duty',
	data () {
		return {
			s : this.permissions,
			positionCode:'',
			positionName:'',
			isEffect:'',
			states:[
				{value:'1',label:"有效"},
				{value:'0',label:"无效"}
			],
			isEffect:'',
			valid:'',
			tableData:[],
			// 分页绑定数据
			currentPage:1,
			totalCount:40
		}
	},
  	methods:{
		//   每页条数切换
		// 分页切换
		handleCurrentChange(val) {
			var condition = {
				positionCode:this.positionCode,
				positionName:this.positionName,
				isEffect:this.isEffect,
				currentPage:this.currentPage
			};
			this.$http.post(this._path + '/positionManage/selectPositionList',condition).then((res)=>{
				if(res.data.resultCode == '0000'){
					this.tableData = res.data.data.positionList;
					for(let i = 0;i < this.tableData.length;i++){
					if('1' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '是';
						}
						if('0' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '否';
						}
					}
				}else{
					this.requestError(res,this)
				}
			})

		},
		inquire () {
			// 查询条件
			var condition = {
				positionCode:this.positionCode,
				positionName:this.positionName,
				isEffect:this.isEffect,
				currentPage:this.currentPage
			};
			this.$http.post(this._path + '/positionManage/selectPositionList',condition).then((res) => {
				if(res.data.resultCode == '0000'){
					this.tableData = res.data.data.positionList;
					for(let i = 0;i < this.tableData.length;i++){
						if('1' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '是';
						}
						if('0' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '否';
						}
					}
				this.totalCount =  res.data.data.totalCount;
				}else{
					this.requestError(res,this)
				}
			})
		},
		operation (type,index,isEffect) {
			/*
				type  操作类型；
				index  查看操作哪条数据
				isEffect  操作删除修改类型
			*/
			if('add' == type){
				this.$router.push({
					path:'/addDuty',
					query:{
						positionName:index?index.positionName:'无',
						pid:index?index.id:''
					}
				});
				return
			}
			// 获取当前点击的下标
			var duty = this.tableData[index]
			// 修改
			if('amend' == type){
				this.$router.push({path:"/amendDuty",query:{id:duty.positionCode}});
			}
			// 删除、恢复
			if('delOrORcover' == type){
				var condition = {
					positionCode:duty.positionCode,
					isEffect
				};
				this.$http.post(this._path + '/positionManage/updatePositionDeleteOrRecover',condition).then((res)=>{
					// 删除/恢复成功
					if('0000' == res.data.resultCode){
						this.$message({
							message:'操作成功',
							type:'success',
							duration:1500,
							showClose:true
						})
						//	删除成功之后刷新页面让页面与后台同步
						var condition = {
							currentPage:this.currentPage
						};
						this.$http.post(this._path + '/positionManage/selectPositionList',condition).then((res)=>{
							if(res.data.resultCode == '0000'){
								this.tableData = res.data.data.positionList;
								for(let i = 0;i < this.tableData.length;i++){
								if('1' == this.tableData[i].isEffect){
										this.tableData[i].isEffect = '是';
									}
									if('0' == this.tableData[i].isEffect){
										this.tableData[i].isEffect = '否';
									}
								}
							}else{
								this.requestError(res,this)
							}
						})
					}else{
						this.requestError(res.data,this)
					}

				})
			}

			// 分配角色
			if('allotRoles' == type){
				this.$router.push({path:"/allotRoles",query:{id:duty.id}});
			}
		}
	},
	created () {
		this.$http.post(this._path + '/positionManage/selectPositionList',{}).then((res) => {
			if('0000' == res.data.resultCode){
				this.tableData = res.data.data.positionList;
				for(let i = 0;i < this.tableData.length;i++){
					if('1' == this.tableData[i].isEffect){
						this.tableData[i].isEffect = '是';
					}
					if('0' == this.tableData[i].isEffect){
						this.tableData[i].isEffect = '否';
					}
				}
				this.totalCount =  res.data.data.totalCount;
			}else{
				this.requestError(res,this)
			}

		})
	}
}
</script>

<style scoped lang="scss">
@import "./../style/duty.scss"
</style>
